<template>
  <div class="status" :class="className">
    {{statusName}}
  </div>
</template>

<script>
  export default {
    name: "StatusToHtml",
    props: {
      status: { // 状态
        type: [String,Number],
        default: ""
      },
    },
    computed:{
      statusName(){
        let name = "";
        if(this.status=='2'){
          name='启用'
        }else if(this.status=='0'){
          name='新增'
        }else if(this.status=='4'){
          name='删除'
        }else if(this.status=='9'){
          name='禁用'
        }else {
          name='未知'
        }
        return '• '+name
      },
      className(){
        let name = "";
        if(this.status=='2'){
          name='enable';
        }else if(this.status=='0'){
          name='add';
        }else if(this.status=='4'){
          name='delete';
        }else if(this.status=='9'){
          name='disable';
        }else {
          name='none';
        }
        return 'status-'+name
      },
    }
  }
</script>

<style lang="scss" scoped>
  .status{
    font-size: 14px;
    font-weight: bold;
    &-enable{
      color: $success;
    }
    &-add{
      color: $primary;
    }
    &-delete{
      color: $red;;
    }
    &-disable{
      color: $danger;
    }
    &-none{
      color: $warning;
    }
  }
</style>
